<template>
    <div class="container">
        <!-- 会员页面  按钮部分 -->
        <div class="handle-box">
            <el-button-group >
                <!-- <el-button color="#0eb394"  @click="addMember">添加会员</el-button> -->
                <el-button type="success"  @click="addMember">添加会员</el-button>
                <el-button type="info"   @click="batchExport">批量导入会员</el-button>
                <!-- <el-button type="info"  @click="batchBindCard">批量绑卡</el-button> -->
            </el-button-group>
          </div>
          <el-divider></el-divider>
          <!-- 会员列表 -->
          <el-table :data="tableData" style="width: 100%" >
            <el-table-column prop="name" label="会员姓名(手机号)" width="180"  >
                <template #default="scope">
                        {{ scope.row.name }}({{scope.row.tel}})
                </template>
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="180" />
            <el-table-column prop="clubCard" label="会员卡" />
            <el-table-column prop="date" label="入会日期" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column  label="操作"  width="250">
                <template #default="scope">
                    <el-row  class="btn-opt">
                        <el-button type="primary" link size="small" @click="memberEdit(scope.row)" >编辑</el-button>
                        <el-button type="success" link size="small" @click="memberDetail(scope.row)">详情</el-button>
                        <el-button type="danger"  link size="small" @click="cancelMember(scope.row)">注销会员</el-button>
                </el-row>
                </template>
            </el-table-column>
      </el-table>
      <el-divider></el-divider>
      <!-- 分页组件 -->
      <el-row>
        <el-col :span="20">
            <el-pagination  v-model:current-page="pageData.pageCurrent"
            :page-size="pageData.pageSize"
             layout="prev, pager, next"   
             :total="pageData.pageTotal"
             background
            @current-change="handleCurrentChange" />
        </el-col>
         <!-- <el-col :span="4" style="font-size: 14px;">
            <span>当前 {{(pageData.pageCurrent-1)*pageData.pageSize+1}} 条到 {{ pageData.pageSize*pageData.pageCurrent }} 条 共 {{pageData.pageTotal}} 条</span>  
         </el-col> -->
        </el-row>

         <!-- 添加会员的抽屉 -->
    <el-drawer v-model="drawer"  :direction="direction" size="50%">
        <template #header>
            <h2>添加会员</h2>
        </template>
        <div class="div-step" >
            <el-steps  :active="active" finish-status="success" simple>
                <el-step title="会员信息" />
                <el-step title="绑定会员卡" />
                <el-step title="完成" />
            </el-steps>
        </div>
        <div class="div-form" >
            <!-- 添加会员的表单  -->
            <EditAddForm v-if="active == 1"  :form="form" v-model:active="active" v-model:drawer="drawer" type="add"/>
            <!-- 绑定会员卡的表单 -->
            <MemberBindForm v-else-if="active == 2" :cardForm="cardForm"  v-model:active="active" v-model:drawer="drawer"/>
            <!-- 会员注册完成 -->
            <div class="div-formFinish"   v-else>
                <span  style="line-height: 120px;">会员注册完成</span>
            </div>
      </div>
   </el-drawer>

   <!--会员编辑   抽屉出来的方式  左右ltr  右左rlt  上下ttb  下上 btt  size设置抽屉占浏览器款的的50%-->
    <el-drawer  v-model="editMemberDrawer"  direction="rtl" size="50%">
     <template #header>
           <h2>编辑会员</h2>
      </template>
       <div class="div-form" >
          <!-- 会员编辑的表单 -->
          <EditAddForm  :form="form" v-model:editMemberDrawer="editMemberDrawer" type="edit"/>  
         </div>
    </el-drawer>
    <!-- 会员详情 -->
    <el-drawer  v-model="memberDetailDrawer"  direction="rtl" size="50%" >
            <template #header>
                  <h2>会员信息</h2>
             </template>
             <!-- 会员详情的组件 -->
             <MemberInfo :memberMsg="memberMsg"/>
    </el-drawer>

   <!-- 批量导入的抽屉 -->
   <el-drawer v-model="batchExportDrawer"  direction="rtl" size="50%">
        <template #header>
            <h2>会员批量导入</h2>
        </template>
        <BatchExportMember/>

    </el-drawer>        




    </div>
     
</template>

<script setup>
import {ref,reactive} from 'vue'
import { ElDrawer, ElMessageBox ,ElMessage} from 'element-plus'
import EditAddForm from './memberComponent/EditAddForm.vue'
import  MemberBindForm from './memberComponent/MemberBindForm.vue'
import  MemberInfo from './memberComponent/MemberInfo.vue'
import BatchExportMember from './memberComponent/BatchExportMember.vue'
import {getMemberInfo} from '@/api/member'

const pageData = reactive({
    pageCurrent:1,
    pageSize:3,
    pageTotal:50
})
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    pageData.pageCurrent = val
    getData()
}
//数据请求
const tableData =ref([])
const getData = () => {
    getMemberInfo({ pageNum: pageData.pageCurrent, pageSize: pageData.pageSize }).then(res => {
        console.log('会员卡cardInfo:', res)
        //todo 如下实现的分页是假分页  需要后端返回真分页的数据  总数据量 
        let start = (pageData.pageCurrent - 1) * pageData.pageSize;//开始位置
        let end = pageData.pageCurrent * pageData.pageSize;//结束位置 数组的截取的时候 [start,end) suo所以不用-1 
        tableData.value = res.data.slice(start, end)
        pageData.pageTotal = res.data.length
    })
}
getData()
/***添加会员 */
const addMember = ()=>{
    drawer.value=true //打开添加的抽屉
    active.value=1//  进度条
    //清空数据
    form.id =0
    form.name = ''
    form.tel = ''
    form.gender = ''
    form.birthday = ''
    form.remark =''
    console.log("添加会员")
}
/***批量导入 */
const  batchExportDrawer = ref(false)
const batchExport = () => {
    console.log("批量导入")
    batchExportDrawer.value = true;
}

//添加会员的抽屉  
const direction = ref('rtl') //抽屉的弹出方向
const drawer = ref(false)//添加抽屉的显示
//定义编辑和添加会员表单的绑定的数据
const form = reactive({
    id:0,
    name: '',
    tel:'',
    gender: '男',
    birthday:'',
    remark:''
})
//添加会步骤条
const active = ref(0)

//绑定会员卡的数据
const  cardForm=reactive({
    cardId:'',
    validCount:50,
    validDay:30,
    receivedMoney:'',
    payMode:[],
    note:''
})

//会员编辑
const editMemberDrawer = ref(false)
const memberEdit = (row)=>{
    console.log("----编辑会员----")
    // Object.assign(form, row)
    form.id=row.id
    form.name= row.name 
    form.tel=row.tel 
    form.gender=row.gender
    form.birthday=row.birthday
    form.remark=row.remark
    editMemberDrawer.value=true
    
}

//会员详情
const  memberDetailDrawer = ref(false)
const isEdit = ref(true)
const memberMsg = reactive({
     id:0,
     name: '',
     tel: '',
     gender: '0',
     birthday: '',
     remark: ''
})
const  memberDetail=(row)=>{
    isEdit.value =true
   memberDetailDrawer.value=true;
   //todo  调用后台接口查询会员信息

   //数据回显 将普通对象的属性赋值给响应式对象
    Object.assign(memberMsg,row)
    // 或者使用展开运算符 未测试 
    // memberMsg = { ...memberMsg, ...row }

/*    memberMsg.id=row.id
   memberMsg.name = row.memberName
   memberMsg.tel = row.tel
   memberMsg.gender = row.gender
   memberMsg.birthday= row.birthday
   memberMsg.remark = row.remark */
//    console.log('-------会员详情-----------')
}
//注销会员 
const cancelMember=(row)=>{
    ElMessageBox.confirm(
        '确定注销会员吗?',
        '注销会员',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //todo 调用后台接口 注销会员
            console.log('---会员id---',row.id)

            ElMessage({
                type: 'success',
                message: '注销成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '暂时不注销',
            })
        })
}
</script >
<style lang="less" scoped>
.handle-box {
	margin-bottom: 20px;  
}
.handle-input {
	width: 220px;
}
.mr10 {
	margin-right: 10px;
}
.w50{
    width: 45%;
}
//步骤条的样式
.div-step{
    width: 100%; 
    height: 120px;
    text-align: center;
}
//表单的样式
.div-form{
    text-align: center; 
    width: 90%;
    margin-left: 20px;
}
//完成注册的样式
.div-formFinish{
    color:#676A6C; 
    background-color: #eee;
    font-size: 45px; 
    height: 120px;
    text-align: center;
    padding: 20px auto;
}
//详情页 描述列表的 样式
.detail-des{
    margin:10px 20px;
}
//按钮样式 
.btn-opt{
    font-size: 13px;
    .el-button{
        margin-left: 3px;
        font-size: 13px;
        padding: 1px 6px;
    }
}

.mt20{
    margin-top: 20px;
}

</style>